<template>
  <div class="following-user-item">
    <div class="user-wrapper d-flex">
      <router-link
        :to="{ name: 'info-center', params: { userId: userData.userId } }"
      >
        <avatar :user="userData"></avatar>
      </router-link>
      <div class="detail">
        <div class="user-abstract">
          <span class="username">{{ userData.nickname }}</span>
          <i class="sex el-icon-male" style="color: #409eff"></i>
        </div>
        <div class="user-about d-flex">
          <div class="count-wrapper">
            <span class="catagory">关注</span>
            <span class="count">{{ userData.followingCount }}</span>
          </div>
          <div class="count-wrapper">
            <span class="catagory">粉丝</span>
            <span class="count">{{ userData.fansCount }}</span>
          </div>
          <div class="count-wrapper">
            <span class="catagory">文章</span>
            <span class="count">{{ userData.postCount }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-button @click="handleFollow"  v-if="userData.isFollowed">
      <i class="el-icon-close" style="margin-right: 5px"></i>取消关注
    </el-button>
    <el-button  @click="handleFollow"  v-else>
      <i class="el-icon-plus" style="margin-right: 5px"></i>关注
    </el-button>
  </div>
</template>

<script>
import userApi from "@/axios/userApi";
export default {
  props: ["user"],
  data() {
    return {
      userData: this.user,
    };
  },
  methods: {
    handleFollow() {
      if (!this.isLogin) return this.popLoginDialog();
      if (this.userData.isFollowed) {
        userApi.unfollow(this.userData.userId).then(({ data }) => {
          if (data.code == this.$status.SUCCESS_CODE) {
            this.userData.isFollowed = false;
            this.$message.success("取消关注成功");
          } else this.$message.error("获取数据时出错");
        });
      } else {
        userApi.follow(this.userData.userId).then(({ data }) => {
          if (data.code == this.$status.SUCCESS_CODE) {
            this.userData.isFollowed = true;
            this.$message.success("关注成功");
          } else this.$message.error("获取数据时出错");
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/less/common.less";

.following-user-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 5px;
  padding-left: 20px;
  border-bottom: 1px solid @borderBase;
  .el-avatar {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  .user-abstract {
    margin-bottom: 10px;
    .username {
      font-weight: 700px;
      font-size: 15px;
      color: #333;
      margin-right: 5px;
    }
  }

  .count-wrapper {
    display: flex;
    color: @regularText;
    font-size: 14px;
    border-right: 1px solid @borderBase;
    &:not(:first-child) .catagory {
      margin-left: 5px;
    }
    .count {
      margin: 0 5px;
    }
  }
  .count-wrapper:last-child {
    border: none;
  }
}
</style>